<template>
  <div v-if="!hasPreview" :style="{ width: `200px`, height: `200px` }"></div>
  <iframe v-else class="w-full h-full" :src="getUrl"></iframe>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin } from '@ve/mixin'
  import { processingConstant } from '@ve/utils/utils'
  import trim from 'lodash/trim'

  export default defineComponent({
    name: 'UiIframe',
    components: {},
    mixins: [UiMixin],
    computed: {
      getUrl() {
        const url = this.info.extension.iframeUrl.value
        // 做常量转化
        const staticList = url.split(/#{#.*?#}/gi)
        const variableList = url.match(/#{#(.+?)#}/g)
        let returnStr = ''
        variableList &&
          variableList.forEach((variableItem, index) => {
            let variableContent = processingConstant(this, trim(variableItem.slice(2, -1)))
            staticList.splice(index * 2 + 1, 0, variableContent)
          })
        returnStr = staticList.join('')
        return returnStr
      },
    },
  })
</script>
<style>
  .uiIframe {
    height: 100%;
  }
</style>
